<template>
	<view class="container">
		<!-- <view class="use_item">
			<view class="title">
				发布类型
			</view>
			<input v-model="form.publishType" placeholder="请输入发布类型" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view> -->
		<view class="use_item">
			<view class="title">
				职位类型
			</view>
			<picker @change="bindPickerChange" :value="form.positionParent" :range="TypeList" :range-key="'name'">
				<view class="picker">{{TypeList[index].name}}</view>
			</picker>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				职位标题
			</view>
			<input v-model="form.title" placeholder="请输入2-10字职位标题" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>

		<Blank></Blank>
		<view class="use_item">
			<view class="title">
				职位薪资
			</view>
			<input v-model="form.salary" placeholder="请选择职位薪资" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				职位标签
			</view>
			<ld-select :list="positionLabellist"
			        list-key="label" value-key="value"
			        placeholder="请选择职位标签"
			        v-model="form.positionLabel"
					selectBgColor="#ccc"
					clearable
					:multiple='true'
			        @change="selectChange">
			</ld-select>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				工作地点
			</view>
			<region-picker @change="region_change"  :value="350104">
			    <view class="picker">{{form.city}}</view>
			</region-picker>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" @click="chooseAddress">
			<view class="title">
				详细地址
			</view>
			<input v-model="form.address" placeholder="请输入详细地址" placeholder-style="color:#CCCCCC;font-size:32rpx" :disabled="!form.address"/>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				开始时间
			</view>
			<e-picker-plus @confirm="sdateChange" mode="YMDhm">
				<view class="picker" style="margin-left: 0;">{{sdate}}</view>
			</e-picker-plus>
			<!-- <picker mode="date" :value="sdate" :start="startDate" :end="endDate" @change="sdateChange">
				<view class="picker">{{sdate}}</view>
			</picker> -->
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<Blank></Blank>
		
		<view class="use_item">
			<view class="title">
				是否拼团
			</view>
			<view class="readio">
				<label class="radio picker flex_start">
					<radio value="1" :checked="isgroup" color="#007AFF"  @click="radio('1')"/><text style="margin-right: 30rpx;">是</text>
					<radio value="2" :checked="!isgroup" color="#007AFF"  @click="radio('2')"/><text>否	</text>
				</label>
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view v-if="isgroup">
			<Blank></Blank>
			<view class="use_item">
				<view class="title">
					拼团价格
				</view>
				<input v-model="form.groupPrice" placeholder="请输入拼团价格" placeholder-style="color:#CCCCCC;font-size:32rpx" />
				<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
			</view><view class="use_item">
				<view class="title">
					拼团人数
				</view>
				<input v-model="form.groupNumber" placeholder="请输入拼团人数" placeholder-style="color:#CCCCCC;font-size:32rpx" />
				<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
			</view>
			<Blank></Blank>
		</view>
		<view class="car_require">
			<view class="tip">
				请补充职位要求
			</view>
			<textarea v-model="form.desc" placeholder-style="color:#BBBBBB" placeholder="请输入职位详细要求" maxlength="500"/>
		</view>
		<view class="car_image">
			<view class="tip">
				<view class="">
					请添加职位图片
				</view>
				<view class="no_require">
					(不必须)
				</view>
				
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view v-for="(item,index) in positionFile" :key="index" class="package_img">
						<image :src="item.url" mode="" v-if="item.type=='image'"></image>
						<video :src="item.url" mode="" v-if="item.type=='video'"></video>
				</view>
				<view class="package_img" @click="upload()">
					<image  src="../../static/img/photo.png" mode=""></image>
				</view>
			</view>
			
		</view>
		<HandleBtn :btnName="form.id ? '确定修改':'确认发布'" @click.native="timingRecruit()" class="confirm_btn"></HandleBtn>

	</view>
</template>

<script>
	import Blank from "../../components/blank.vue"
	import HandleBtn from "../../components/handleBtn.vue"
	import MyPicker from '../../components/dying318-picker/Picker.vue';
	export default {
		components: {
			Blank,
			HandleBtn,
			MyPicker
		},
		data() {
			return {
				positionFile:[],
				TypeList: [
					{
						name:''
					}
				],	
				index: 0,
				isgroup:false,
				positionLabellist:[{
						value: '午休',
						label: '午休'
					}, {
						value: '包住',
						label: '包住'
					}, {
						value: '不加班',
						label: '不加班'
					}, {
						value: '免费零食',
						label: '免费零食'
					}, {
						value: '员工旅游',
						label: '员工旅游'
					},{
						value: '定期团建',
						label: '定期团建'
					},{
						value: '生日福利',
						label: '生日福利'
					},{
						value: '五险一金',
						label: '五险一金'
					},{
						value: '交通补贴',
						label: '交通补贴'
					},{
						value: '免费工装',
						label: '免费工装'
				}],//职位标签
				sdate: '请选择开始时间',
				form:{
					title:"",
					salary:"",
					positionLabel:[],
					positionParent:"",
					desc:"",
					positionFile:[],
					number:"1",
					city:"请选择地区",
					beginTime:"",
					address :"",
					group:0,//是否可以组团 0-不可以 1-可以
					groupPrice:'',//组团价格
					groupNumber:'',
					dimension: '',
					longitude: ''
				}
			}
		},
		onLoad(option) {
			if(option.edit) {
				let obj = JSON.parse(option.obj)
				console.log(this.$utils.happenTimeFun(obj.createTime))
				this.form = obj
				this.form.publishType = obj.publishType
				this.sdate = this.$utils.happenTimeFun(obj.createTime)
				this.form.beginTime = this.$utils.happenTimeFun(obj.createTime)
				this.isgroup = obj.group == 1 ? true : false
			}
			this.getpositionLabel()
			this.getpositionType()
		},
		methods: {
			bindPickerChange(e) {
			    this.index = e.target.value
					this.form.positionParent = this.TypeList[this.index].id
			},
			// 职位类型获取
			getpositionType(){
				this.$utils.requert({url:'positionType',}).then(res=>{
					if(res.code === 1 ){
						this.TypeList = res.data
						this.form.positionParent = res.data[0].id
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			radio(num){
				if(num==1){
					this.isgroup = true
					this.form.group = 1
					
				}else{
					this.isgroup = false
					this.form.group = 0
				}
			},
			timingRecruit(){
				this.form.city = uni.getStorageSync('addr')||''
				
				if (!this.form.beginTime) {
					this.$utils.showLayer('请选择开始时间')
					return
				}
				if (this.form.city == '请选择城市') {
					this.$utils.showLayer('请选择城市')
					return
				}
				this.form.orderId = this.form.id ? this.form.id : 0
				this.$utils.requert({url:'timeOrderPublish',data:this.form,type:'post'}).then(res=>{
					if(res.code === 1 ){
						this.$utils.showLayer(this.form.id ? '修改成功':'发布成功')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			chooseAddress(){
				var _this=this;
				if (!_this.form.address) {
					uni.chooseLocation({
						success(res) {
							console.log(res)
							_this.form.dimension = res.latitude 
							_this.form.longitude = res.longitude 
							_this.form.address = res.name
						}
					})
				}
			},
			// 职位标签获取
			getpositionLabel(){
				this.$utils.requert({url:'positionLabel',}).then(res=>{
					if(res.code === 1 ){
						this.$utils.showLayer(res.message)
					
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			//标签选择
			l_selectChange(value){
				// console.log(value)
				this.form.positionLabel = value
			},
			selectChange(value){
				this.form.positionLabel = value
				console.log(this.form.positionLabel)
				this.form.positionLabel =this.form.positionLabel.join(",")
			},
			region_change(e){
				// console.log(e)
				this.form.city = e.detail.value[1]
			},
			// 选择日期
			sdateChange(e) {
				this.sdate = e.result
				this.form.beginTime = e.result
			},
			upload(){
				let _this = this
				// _this.uploadImage()
				uni.showModal({
					title: '提示',
					content: '请选择上传类型',
					showCancel: true,
					cancelText: '上传视频',
					confirmText: '上传图片',
					success: res => {
						console.log(res)
						if(res.confirm){
							_this.uploadImage()
						} else {
							_this.uploadVideo()
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//图片上传
			uploadImage(){
				var _this = this
				uni.showLoading({
					title:'上传中'
				})
			 uni.chooseImage({
				count: 2,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: res=> {
					console.log(res)
					var tempFilePaths = res.tempFilePaths
					tempFilePaths.forEach(element => {
						// const file = res.tempFilePaths[0]
						const  token  = uni.getStorageSync('token')
						uni.uploadFile({
							url: _this.$utils.domain+'/api/api/uploadImg', //仅为示例，非真实的接口地址
							filePath: element,
							name: 'file',
							header:{
								'accessToken':token
							},
							formData: {
								'type': '2'
							},
							success: (imgres) => {
								var imgres = JSON.parse(imgres.data)
								_this.imgsFile = _this.form.positionFile.push(imgres.data.src)
								_this.positionFile.push({
									url:imgres.data.src,
									type:'image'
								})
								uni.hideLoading()
								console.log(_this.form.positionFile)
							},
							complete:()=>{
								uni.hideLoading()
							}
						});
					})
				},
				error : function(e){
				 // console.log(e);		
				}
				});
			},
			//视频上传
			uploadVideo(){
				uni.showLoading({
					title:'上传中'
				})
				 uni.chooseVideo({
					count: 2,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: res=> {
						let file = res.tempFilePath
						console.log(res)
						console.log(res.tempFilePath)
						let  token  = uni.getStorageSync('token')
						uni.uploadFile({
							url: this.$utils.domain+'/api/api/uploadFile', //仅为示例，非真实的接口地址
							filePath: file,
							
							name: 'file',
							header:{
								'accessToken':token
							},
							formData: {
								'type': '2'
							},
							success: (res) => {
								var res = JSON.parse(res.data)
								this.imgsFile = 	this.form.positionFile.push(res.data.src)
								this.positionFile.push({
									url:res.data.src,
									type:'video'
								})
								console.log(this.form.positionFile)
							},
							complete:()=>{
								uni.hideLoading()
							}
						});
					},
					error : function(e){
					 // console.log(e);		
					}
					});
				},
			// 获取年月日信息
				getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
				
					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				}
			},
			computed: {
					startDate() {
						return this.getDate('start');
					},
					endDate() {
						return this.getDate('end');
					}
				},
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.use_item {
		padding: 38rpx 0;
		margin:0 24rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.use_item:nth-child(2){
		border-bottom: none;
	}
	.use_item:nth-child(7){
		border-bottom: none;
	}

	.use_item .title {
		font-size: 32rpx;
		color: #868686;
		width: 50%;
	}

	.use_item input {
		font-size: 32rpx;
		text-align: right;
		margin-right: 20rpx;
	}
	.use_item .picker{
		font-size: 32rpx;
		margin-left: 40rpx;
	}	
	.use_item image{
		width: 14rpx;
		height: 24rpx;
	}
	.tip{
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 34rpx;
	}
	textarea{
		background-color: #f5f4f6;
		font-size: 28rpx;
		width: 100%;
		border-radius: 7rpx;
		padding:32rpx 24rpx;
		box-sizing: border-box;
	}
	.car_require {
		padding:50rpx 24rpx;
		box-sizing: border-box;
	}
	.car_image{
		padding:0 24rpx 50rpx;
		box-sizing: border-box;
	}
	.car_image .tip{
		display: flex;
	}
	.car_image .tip .no_require{
		font-size: 28rpx;
		color: #BBBBBB;
	}
	.car_image .package_img{
		width:200rpx;
		height: 200rpx;
		background-color: #f5f4f6;
		text-align: center;
		flex-shrink: 0;
		margin-bottom: 15rpx;
		margin-left: 20rpx;
	}
	.car_image .package_img image,.car_image .package_img video{
		width:100%;
		height: 100%;
		/* margin-top: 62rpx */
		border-radius: 15rpx;

	}
	.confirm_btn{
		margin-top: 70rpx;
		margin-bottom: 70rpx;
	}
	.button{
		font-size: 28rpx;
		margin: 0;
		margin-left: auto;
		background-color: #fff;
		color: #7a7a7a;
	}
	.button::after{
		height: 100%;
		border: none;
	}
</style>
